/* How to play (src/ui/coach.js): a pulsing finger on the control to use and a bubble saying what it does; the tips in context */
#coach { position: fixed; inset: 0; pointer-events: none; z-index: 45; display: none; }
#coach.on { display: block; }
#coach .co-finger { position: absolute; font-size: 46px; line-height: 1; transform: translate(-50%, 0); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
  animation: co-tap 1.1s ease-in-out infinite; }
#coach .co-finger.none { display: none; }
#coach .co-finger.swipe { left: 72%; top: 56%; animation: co-swipe 1.9s ease-in-out infinite; } /* the right side: the left 45% is the joystick (game/input.js) */
@keyframes co-tap { 0%, 100% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-50%, 12px) scale(.9); } }
@keyframes co-swipe { 0%, 100% { transform: translate(-80px, 0) rotate(-12deg); } 50% { transform: translate(60px, 0) rotate(12deg); } }
#coach .co-bubble { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(86vw, 420px); box-sizing: border-box;
  background: rgba(15, 29, 51, .94); color: #fff; padding: 12px 16px 10px; border-radius: 16px; text-align: center;
  font: 700 15px/1.35 var(--ui, 'Plus Jakarta Sans', system-ui, sans-serif); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); pointer-events: none; /* touches go through to the game */
  animation: co-in .25s ease-out; }
@keyframes co-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
#coach .co-skip { display: block; margin: 6px auto 0; background: none; border: 0; padding: 2px 6px; color: #9fb4d6; font: 600 12px var(--ui, system-ui, sans-serif);
  text-decoration: underline; cursor: pointer; pointer-events: auto; }
#coach.tip .co-skip { display: none; }
#coach.tip .co-bubble { background: rgba(255, 255, 255, .97); color: #12223a; } /* a tip: taps go through it (to the phone, the map...); it goes by itself */