/* The new player's guide (platform/tutorial.js). Over everything the game draws, under nothing: the system cards hide it
   (app.js cardOpen). Only .tut-bub's buttons and .tut-card take touches. */
#tut{position:fixed;inset:0;z-index:60;pointer-events:none;font-family:var(--maru),sans-serif;color:var(--dink,#1d1230)}
#tut[hidden]{display:none}
#tut .tut-dim{position:absolute;inset:0;background:rgba(12,7,28,.62)}
#tut.tip .tut-dim{background:rgba(12,7,28,.38)}
#tut .tut-hole{position:absolute;border-radius:16px;box-shadow:0 0 0 200vmax rgba(12,7,28,.62);outline:3px dashed #ffd23f;outline-offset:3px;transition:left .25s,top .25s,width .25s,height .25s}
#tut.tip .tut-hole{box-shadow:0 0 0 200vmax rgba(12,7,28,.38)}
#tut .tut-hole+.tut-hole{box-shadow:none}   /* (two holes: one shadow, or the second darkens the first) */
#tut [hidden]{display:none!important}

/* the hand: its fingertip on (left, top); pressing every 1.2 s with a ring where it presses */
#tut .tut-hand{position:absolute;width:0;height:0;transition:left .25s,top .25s}
#tut .tut-hand-svg{position:absolute;left:-26px;top:-6px;width:60px;height:79px;transform-origin:26px 6px;transform:rotate(-14deg);filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));animation:tut-press 1.2s ease-in-out infinite}
#tut .tut-hand.down .tut-hand-svg{transform:rotate(166deg);animation-name:tut-press-down}
#tut.tapping .tut-hand-svg{animation-duration:.6s}
#tut .tut-ring{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:3px solid #ffd23f;opacity:0;animation:tut-ring 1.2s ease-out infinite}
#tut.tapping .tut-ring{animation-duration:.6s}
@keyframes tut-press{0%,100%{translate:0 10px}45%{translate:0 0}55%{translate:0 0}}
@keyframes tut-press-down{0%,100%{translate:0 -10px}45%{translate:0 0}55%{translate:0 0}}
@keyframes tut-ring{0%,40%{opacity:0;scale:.4}50%{opacity:1;scale:.5}100%{opacity:0;scale:1.6}}

/* ミケ's bubble */
#tut .tut-bub{position:absolute;left:16px;right:16px;max-width:420px;margin:0 auto;box-sizing:border-box;display:grid;grid-template-columns:48px 1fr;column-gap:10px;row-gap:6px;
  padding:11px 12px 9px;background:#fff6d6;border:3px solid var(--dink,#1d1230);border-radius:16px;box-shadow:4px 4px 0 var(--dink,#1d1230);pointer-events:auto;transition:top .25s,bottom .25s}
#tut.in .tut-bub{animation:tut-pop .28s cubic-bezier(.3,1.6,.6,1)}
#tut .tut-face{width:48px;height:48px;border-radius:50%;background:#ffd3e0;border:2.5px solid var(--dink,#1d1230);overflow:hidden;align-self:start}
#tut .tut-face svg{width:100%;height:100%;display:block}
#tut .tut-t{align-self:center;min-width:0}
#tut .tut-t b{display:block;font-weight:800;font-size:16px;line-height:1.38;text-wrap:balance}
#tut .tut-t small{display:block;margin-top:2px;font-weight:700;font-size:12.5px;line-height:1.4;color:#7a5a8c}
#tut .tut-foot{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-height:22px}
#tut .tut-step{font:700 11px/1 var(--mono,monospace);color:#9a83a8;margin-right:auto}
#tut .tut-skip{border:0;background:none;padding:4px 2px;font:700 12px/1 var(--maru),sans-serif;color:#9a83a8;cursor:pointer}
#tut .tut-ok{border:2.5px solid var(--dink,#1d1230);border-radius:10px;background:#ffd23f;box-shadow:2px 2px 0 var(--dink,#1d1230);padding:6px 14px;font:800 13px/1 var(--maru),sans-serif;color:var(--dink,#1d1230);cursor:pointer}
#tut .tut-ok:active{translate:2px 2px;box-shadow:none}
@keyframes tut-pop{0%{opacity:0;scale:.92}100%{opacity:1;scale:1}}

/* the welcome card, first launch */
#tut.card{pointer-events:auto}
#tut .tut-card{position:absolute;left:24px;right:24px;top:50%;translate:0 -54%;max-width:380px;margin:0 auto;box-sizing:border-box;padding:20px 20px 14px;text-align:center;
  background:#fff6d6;border:3px solid var(--dink,#1d1230);border-radius:20px;box-shadow:6px 6px 0 var(--dink,#1d1230);animation:tut-pop .3s cubic-bezier(.3,1.6,.6,1)}
#tut .tut-face.big{width:84px;height:84px;margin:0 auto 6px;border-width:3px}
#tut .tut-card h2{margin:4px 0 10px;font:400 24px/1.25 var(--display),sans-serif;text-wrap:balance}
#tut .tut-card p{margin:0 0 8px;font-weight:700;font-size:14.5px;line-height:1.6;text-align:left}
#tut .tut-go{display:block;width:100%;margin:14px 0 6px;padding:11px 0;border:3px solid var(--dink,#1d1230);border-radius:14px;background:#ffd23f;box-shadow:4px 4px 0 var(--dink,#1d1230);font:400 20px/1 var(--display),sans-serif;color:var(--dink,#1d1230);cursor:pointer}
#tut .tut-go:active{translate:3px 3px;box-shadow:1px 1px 0 var(--dink,#1d1230)}
#tut .tut-card .tut-no{display:block;width:100%;margin:0;padding:8px 0 2px;border:0;background:none;font:700 13px/1 var(--maru),sans-serif;color:#8a6f9a;cursor:pointer}
@media (prefers-reduced-motion:reduce){#tut .tut-hand-svg,#tut .tut-ring{animation:none}#tut .tut-ring{display:none}}