/* =====================================================================================================
   OPENING CUTSCENE (js/intro.js): one canvas over the whole stage, a SKIP pill, and the title's INTRO button.
   ===================================================================================================== */
.intro { position: absolute; inset: 0; z-index: 400; overflow: hidden; background: #2a1420; touch-action: none; transition: opacity .35s ease; }
.intro.out { opacity: 0; pointer-events: none; }
.intro canvas { position: absolute; left: 0; top: 0; display: block; }
.intro-skip { position: absolute; right: 24px; bottom: 28px; z-index: 2; padding: 10px 20px 10px 24px; border-radius: 999px; border: 3px solid #3a2433;
  background: #fff7f0; color: #3a2433; font: 900 18px/1 var(--font-cute); letter-spacing: .14em; box-shadow: 0 4px 0 #3a2433; cursor: pointer;
  opacity: 0; animation: intro-skip-in .4s ease .9s forwards; -webkit-tap-highlight-color: transparent; }
.intro-skip b { font-size: 24px; margin-left: 4px; vertical-align: -2px; }
.intro-skip:hover, .intro-skip:focus-visible { background: #ffd0e2; outline: none; }
.intro-skip:active { box-shadow: 0 1px 0 #3a2433; translate: 0 3px; }
@keyframes intro-skip-in { from { opacity: 0; } to { opacity: .92; } }
html.portrait .intro-skip { font-size: 26px; padding: 16px 30px 16px 34px; right: 30px; bottom: 44px; }

/* title screen: watch the story again */
.tt-intro { position: absolute; right: 34px; top: 28px; z-index: 6; padding: 9px 18px; border-radius: 999px; border: 3px solid #3a2433;
  background: #fff7f0; color: #3a2433; font: 900 16px/1 var(--font-cute); letter-spacing: .16em; box-shadow: 0 4px 0 #3a2433; cursor: pointer; }
.tt-intro:hover, .tt-intro:focus-visible { background: #ffd0e2; outline: none; translate: 0 -2px; }
html.portrait .tt-intro { font-size: 24px; padding: 14px 24px; right: 28px; top: 30px; }